import React from 'react'
import { Button, Form, message, DatePicker, Select } from 'antd'
import { connect } from "react-redux"; //连接器
import * as actions from "../../../../../pages/CameraManagement/store/action";
import moment from "moment";
import locale from 'antd/lib/date-picker/locale/zh_CN'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

const { RangePicker } = DatePicker
const { Option } = Select

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pageIndex: 1, //默认当前页
            pageSize: 10,
        }
        this.props.toAreaCameraToRequest();
    }
    onFinish = (value) => {
        let time = {
            startTime:
                value.warningTime == undefined
                    ? ""
                    : new Date(value.warningTime[0]._d).getTime(),
            endTime:
                value.warningTime == undefined
                    ? ""
                    : new Date(value.warningTime[1]._d).getTime() + 1 * 24 * 60 * 60 * 1000,
        };
        let page = {
            pageIndex: this.state.pageIndex - 1,
            pageSize: this.state.pageSize,
        };
        let values = {
            ...value,
            ...page,
            ...time,
        };
        if (values.warningAddress === undefined && values.status === undefined && values.warningType === undefined &&
            values.startTime === undefined && values.isManpower === undefined && values.endTime === undefined &&
            values.isDistribute === undefined) {
            message.warning("请输入查询条件！", 3);
            return
        } else if (values.warningAddress === "" && values.status === "" && values.warningType === "" && values.startTime === "" &&
            values.isManpower === "" && values.endTime === "" && values.isDistribute === "") {
            message.warning("请输入查询条件！", 3);
            return
        } if (values.warningAddress === "") {
            values.warningAddress = undefined
        }
        if (values.status === "" && values.status === "全部状态") {
            values.status = undefined
        }
        if (values.warningType === "" && values.warningType === "全部类型") {
            values.warningType = undefined
        }
        if (values.startTime === "") {
            values.startTime = undefined
        }
        if (values.isManpower === "") {
            values.isManpower = undefined
        }
        if (values.endTime === "") {
            values.endTime = undefined
        }
        if (values.isDistribute === "") {
            values.isDistribute = undefined
        }
        if (this.props.information == undefined) {
            this.props.handleQueryByAdress(values)
        }
        if (this.props.information != undefined) {
            values.vidiconId= this.props.id
            this.props.getWarningByASTTMD2(values)
        }
    };
    render() {
        const { allRegion } = this.props
        return (
            <div>
                <Form layout="inline" ref="queryByAdress" onFinish={this.onFinish}>
                    <Form.Item name='warningAddress'>
                        <Select placeholder="请输入告警地点">
                            {allRegion.map((item, index) => {
                                return (
                                    <Option value={item.regionName}>{item.regionName}</Option>
                                );
                            })}
                        </Select>
                    </Form.Item>
                    <Form.Item name="status">
                        <Select placeholder="全部状态">
                            <Option>全部状态</Option>
                            <Option value="疑似">疑似</Option>
                            <Option value="误报">误报</Option>
                            <Option value="确认">确认</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name='warningTime' style={{ width: '245px' }}>
                        <RangePicker 
                            showTime = {{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }}
                            format="YYYY-MM-DD"
                        />
                    </Form.Item>
                    <Form.Item name='isManpower' >
                        <Select placeholder="是否人工甄别">
                            <Option value="是">是</Option>
                            <Option value="否">否</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name='isDistribute'>
                        <Select placeholder="派警详情">
                            <Option value="1">已派警</Option>
                            <Option value="0">未派警</Option>
                            <Option value="2">未处理</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">查询</Button>
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={() => {
                            this.refs.queryByAdress.resetFields();
                            this.props.handleResetQuery();
                        }}>重置</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    allRegion: state.regionConfig.allRegion,
});
const mapDispatchToProps = (dispatch) => ({
    //获取所有区域
    toAreaCameraToRequest() {
        dispatch(actions.getAllRegionRequest())
    },

})
export default connect(mapStateToProps, mapDispatchToProps)(Index);